<template>
	<view>
		<view class="camera-container">
			<camera
				v-if="showCamera"
				mode="scanCode"
				@scancode="onScanCode"
				@error="cameraError"
				class="camera-preview"
			></camera>
			<view v-else class="camera-placeholder" @click="showCamera = true">
				<text>启动摄像头失败，点击重试</text>
			</view>
			<view class="scan-overlay">
				<view class="scan-tip">请将条码对准扫描框</view>
			</view>
		</view>
		<view class="inventory">
			<view>商品清单（{{ out_detail.materielNum || 0 }}）</view>
		</view>
		<view class="sweep_code-ul">
			<view class="sweep_code-li" v-for="(item, index) in goods_list" :key="index">
				<view class="logs-goods">
					<view class="goods-img">
						<image :src="item.images[0]" mode="aspectFill"></image>
						<view class="all-tag" v-if="Number(item.notOutNum) === 0">全部出库</view>
					</view>
					<view class="goods-info">
						<view class="goods-name-row">
							<view class="goods-name ellipsis">{{ item.materielName }}</view>
							<view class="status-tag" :class="item.scanned ? 'status-scanned' : 'status-pending'">
								{{ item.scanned ? '已出库' : '待出库' }}
							</view>
						</view>
						<view class="goods-sku" v-if="item.skuName">{{ item.skuName }}</view>
						<view class="goods-sku-selectable" @click="openwarehouse(index, item)">
							<text class="label">仓库</text>
							<view class="value">
								<text class="ellipsis">{{ item.warehouseName || '请选择' }}</text>
								<u-icon name="arrow-down" size="24" color="#879BBA"></u-icon>
							</view>
						</view>
						<view class="goods-sku-selectable" v-if="enableLocationManagement === 5" @click="openLocation(index, item, 'tip')">
							<text class="label">库区库位</text>
							<view class="value">
								<text class="ellipsis" v-if="item.storageLocationName">{{ item.areaName }}-{{ item.storageLocationName }}</text>
								<text v-else>请选择</text>
								<u-icon name="arrow-down" size="24" color="#879BBA"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="stock-info" :style="{ lineHeight: item.isPreSale === 5 ? '80rpx' : '36rpx' }">
						待出库：
						<text class="num">{{ $utils.formatNub(item.total) }}</text>
						{{ item.unitName }}
						<view v-if="item.isPreSale !== 5" class="saleable">可售：{{ item.warehouseName ? $utils.formatNub(item.locationNum) : '请选择仓库' }}</view>
					</view>
					<view class="stepper">
						<text>本次出库</text>
						<u-number-box :index="index" :min="0" :max="Number(item.maxOutNum)" :value="item.num" @change="numchange"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn">
			<view class="submit-btn-left" v-if="outMaterielNum > 0">
				<view class="other-info">商品：{{ outMaterielNum }}</view>
				<view class="other-info">数量：{{ outGoodsTotal }}</view>
			</view>
			<view class="submit-btn-left" style="line-height: 98rpx;" v-else>出库商品为0</view>
			<view class="btn-right" :class="[outMaterielNum < 1 ? 'btn-min-no' : '']" @click="nextPage">下一步</view>
		</view>
		<u-popup mode="center" width="680" border-radius="16" :height="popheight" v-model="warehouse_show">
			<view class="pop-view">
				<view class="pop-title">选择仓库</view>
				<view class="goods-name">{{ goods_name }}</view>
				<scroll-view scroll-y class="warehouse-ul" :style="{ height: popheight - 230 + 'rpx' }">
					<view class="warehouse-li" v-for="(item, index) in warehouse_list" :key="index" @click="selWarehouse(item)">
						<view class="name">{{ item.warehouseName }}</view>
						<view class="num" v-if="item.unitName">可售库存：{{ $utils.formatNub(item.inventoryNum) }}{{ item.unitName }}</view>
						<view class="sel-icon" v-if="Number(item.inventoryNum) > 0 || !item.unitName">
							<u-icon
								:name="warehouse_arr.find(ware => ware.warehouseId === item.warehouseId) ? 'checkmark-circle-fill' : 'checkmark-circle'"
								:color="warehouse_arr.find(ware => ware.warehouseId === item.warehouseId) ? '#FB5904' : '#879bba'"
								size="38"
							></u-icon>
						</view>
					</view>
					<u-empty v-if="!warehouse_list.length" text="暂无可选仓库" mode="list"></u-empty>
				</scroll-view>
				<view class="pop-submit-btn"><u-button size="medium" type="primary" @click="selWarehouseConfirm">确定</u-button></view>
			</view>
		</u-popup>
		<u-popup mode="center" width="680" border-radius="16" :height="popheight" v-model="location_show">
			<view class="pop-view">
				<view class="pop-title">选择库区库位</view>
				<scroll-view scroll-y class="warehouse-ul" :style="{ height: popheight - 80 + 'rpx' }">
					<view class="warehouse-li" v-for="(item, index) in location_list" :key="index" @click="selLocation(item)">
						<view class="name">
							<text class="label">库区</text>
							{{ item.areaName }}
						</view>
						<view class="name">
							<text class="label">库位</text>
							{{ item.storageLocationName }}
						</view>
						<view class="num">可售库存：{{ $utils.formatNub(item.num) }}{{ item.unitName }}</view>
						<view class="sel-icon"><u-icon name="arrow-down" color="#879bba" size="28"></u-icon></view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup mode="center" width="680" border-radius="16" :height="popheight" v-model="goods_show">
			<view class="pop-view">
				<view class="pop-title">选择出库商品</view>
				<scroll-view scroll-y class="goods-ul" :style="{ height: popheight - 80 + 'rpx' }">
					<view class="goods-li" v-for="(item, index) in scan_goods_list" :key="index" @click="selGoods(item)">
						<view class="goods-img"><image :src="item.images[0]" mode="aspectFill"></image></view>
						<view class="goods-info">
							<view class="name-view ellipsis">{{ item.materielName }}</view>
							<view class="goods-sku">{{ item.unitName }};{{ item.skuName }}</view>
						</view>
						<view class="sel-icon"><u-icon name="checkmark-circle" color="#FB5904" size="38"></u-icon></view>
					</view>
					<u-empty v-if="!scan_goods_list.length" text="暂无可选仓库" mode="list"></u-empty>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goods_show: false,
			warehouse_show: false,
			warehouse_list: [],
			location_list: [],
			location_show: false,
			bar_code: '',
			out_detail: {},
			bill_id: '',
			goods_list: [],
			popheight: '',
			skuId: '',
			goods_index: 0,
			warehouse_arr: [],
			goods_name: '',
			scan_goods_list: [],
			shop_warehouse_list: [],
			showCamera: true, // 默认显示摄像头
			cameraContext: null
		};
	},
	computed: {
		enableLocationManagement() {
			return parseInt(this.$store.state.basicSet.enableLocationManagement);
		},
		// 出库商品种类
		outMaterielNum() {
			const list = this.goods_list.filter(item => item.num > 0).map(item => item.skuId);
			// [...new Set(list)] 用来去重
			return [...new Set(list)].length;
		},
		// 出库合计数量
		outGoodsTotal() {
			let num = 0;
			this.goods_list.forEach(item => {
				num = this.$NP.plus(Number(item.num), num);
			});
			return num;
		}
	},
	async onLoad(options) {
		// 设置弹窗的高度
		const systemInfo = uni.getSystemInfoSync();
		this.popheight = (systemInfo.screenHeight - systemInfo.statusBarHeight - 344) * systemInfo.pixelRatio + '';
		this.bill_id = options.id;
		// await this.getInventoryOutInfo(); // 重构后在下面调用
		await this.initializePage();
	},
	methods: {
		async initializePage() {
			await this.getInventoryOutInfo();
			await this.getShopBindWarehouse();
			await this.initializeGoodsList();
		},
		async initializeGoodsList() {
			uni.showLoading({ title: '初始化商品列表...' });
			const promises = this.goods_list.map(item => this.fetchDefaultWarehouse(item));
			const updatedList = await Promise.all(promises);
			this.goods_list = updatedList;
			uni.hideLoading();
		},
		async fetchDefaultWarehouse(item) {
			try {
				if (item.isPreSale === 5 || item.isDistribution === 5) {
					// 预售或分销，使用店铺绑定仓库
					if (this.shop_warehouse_list.length > 0) {
						const defaultWarehouse = this.shop_warehouse_list[0];
						return { ...item, warehouseId: defaultWarehouse.id, warehouseName: defaultWarehouse.warehouseName };
					}
					return item; // 没有则返回原样
				} else {
					// 普通商品，获取库存分布
					const res = await this.$u.api.getWarehouseInventory(item.skuId);
					if (res.data && res.data.length > 0) {
						const defaultWarehouse = res.data[0];
						return {
							...item,
							warehouseId: defaultWarehouse.warehouseId,
							warehouseName: defaultWarehouse.warehouseName,
							locationNum: defaultWarehouse.inventoryNum
						};
					}
				}
			} catch (error) {
				console.error(`获取 ${item.materielName} 仓库信息失败`, error);
			}
			return item; // 出错或无仓库则返回原样
		},

		// 摄像头扫码成功
		onScanCode(e) {
			console.log('scancode:', e.detail.result);
			if (!e.detail.result) return;
			// 震动提示
			uni.vibrateShort();
			this.updateStatusByBarCode(e.detail.result);
		},
		cameraError(e) {
			console.log('camera error:', e.detail);
			this.$u.toast('摄像头初始化失败，请检查权限');
			this.showCamera = false;
		},

		numchange(e) {
			const target = this.$u.deepClone(this.goods_list);
			target[e.index].num = e.value;
			// 统计当前已经出库的数量
			let otherOutnum = 0;
			let outnum = 0;
			target.forEach(item => {
				if (item.skuId === target[e.index].skuId) {
					outnum += item.num;
					if (item.warehouseId !== target[e.index].warehouseId) {
						otherOutnum += item.num;
					}
				}
			});
			if (target[e.index].isPreSale !== 5) {
				// 设置最大值
				let maxOutNum = 0;
				if (Number(target[e.index].locationNum) && Number(target[e.index].locationNum) > Number(target[e.index].total)) {
					maxOutNum = this.$NP.minus(target[e.index].total, otherOutnum);
				} else {
					// 如果剩余数量小于可售数量，则最大值为剩余数量
					if (this.$NP.minus(target[e.index].total, otherOutnum) <= target[e.index].locationNum) {
						maxOutNum = this.$NP.minus(target[e.index].total, otherOutnum);
					} else {
						maxOutNum = target[e.index].locationNum;
					}
				}
				target[e.index].maxOutNum = maxOutNum;
			} else {
				target[e.index].maxOutNum = this.$NP.minus(target[e.index].total, otherOutnum);
			}
			// 设置未出库数量
			target.forEach(item => {
				if (item.skuId === target[e.index].skuId) {
					item.notOutNum = this.$NP.minus(item.total, outnum) <= 0 ? 0 : this.$NP.minus(item.total, outnum);
				}
			});

			this.goods_list = target;
		},
		// 仓库确认按钮
		selWarehouseConfirm() {
			if (!this.warehouse_arr.length) {
				this.warehouse_show = false;
				// 重新扫码
				this.reScan();
				return;
			}
			const arr = this.$u.deepClone(this.warehouse_arr).map(item => {
				let obj = {
					...this.$u.deepClone(this.goods_list[this.goods_index]),
					warehouseName: item.warehouseName,
					warehouseId: item.warehouseId
				};
				if (this.goods_list[this.goods_index].isPreSale !== 5) {
					obj.locationNum = item.inventoryNum;
					obj.maxOutNum = item.inventoryNum;
					obj.notOutNum = item.inventoryNum;
				}
				return obj;
			});
			this.goods_list.splice(this.goods_index, 1, ...arr);
			this.warehouse_arr = [];
			this.warehouse_show = false;
			// 如果只选择了一个仓库，直接打开库区库位
			if (arr.length === 1) {
				this.getAreaDateBySkuId(arr[0].warehouseId);
			} else {
				// 否则重新扫码
				this.reScan();
			}
		},
		// 库存分布
		openwarehouse(index, item) {
			if (item.isPreSale === 5 || item.isDistribution === 5) {
				this.warehouse_list = this.$u.deepClone(this.shop_warehouse_list);
				this.warehouse_show = true;
			} else {
				this.goods_index = index;
				this.goods_name = item.materielName;
				this.skuId = item.skuId;
				this.$u.api.getWarehouseInventory(item.skuId).then(res => {
					this.warehouse_list = res.data;
					this.warehouse_show = true;
				});
			}
		},
		// 获取指定店铺绑定的所有仓库数据
		async getShopBindWarehouse() {
			await this.$u.api.getShopBindWarehouse(this.out_detail.shopId).then(res => {
				if (res.data && res.data.warehouseData) {
					this.shop_warehouse_list = Object.values(res.data.warehouseData).map(item => {
						return {
							...item,
							warehouseId: item.id
						};
					});
				}
			});
		},
		// 仓库点击
		selWarehouse(item) {
			if (item.unitName && item.inventoryNum <= 0) {
				this.$u.toast('抱歉，当前仓库可售库存为0');
				return;
			}
			const index = this.warehouse_arr.findIndex(ware => ware.warehouseId === item.warehouseId);
			if (index > -1) {
				this.warehouse_arr.splice(index, 1);
			} else {
				this.warehouse_arr.push(item);
			}
		},
		// 打开库区库位弹窗
		openLocation(index, item, istip) {
			this.goods_index = index;
			this.skuId = item.skuId;
			this.getAreaDateBySkuId(item.warehouseId, istip);
		},
		// 可选的库位
		getAreaDateBySkuId(warehouseId, istip) {
			if (this.enableLocationManagement !== 5) {
				return;
			}
			this.$u.api
				.getAreaDateBySkuId({
					skuId: this.skuId,
					warehouseId: warehouseId
				})
				.then(res => {
					if (res.data.length) {
						this.location_list = res.data[0].areaDate;
						this.location_show = true;
					} else {
						if (istip) {
							this.$u.toast('该商品没有可选择的库位');
						}
					}
				});
		},
		// 选择库区库位
		selLocation(item) {
			this.location_show = false;
			const target = this.$u.deepClone(this.goods_list);
			let obj = {
				...target[this.goods_index],
				areaCode: item.areaCode,
				areaId: item.areaId,
				areaName: item.areaName,
				storageLocationCode: item.storageLocationCode,
				storageLocationId: item.storageLocationId,
				storageLocationName: item.storageLocationName
			};
			if (target[this.goods_index].isPreSale !== 5) {
				obj.locationNum = item.num;
				obj.maxOutNum = item.num;
				obj.notOutNum = item.num;
			}
			this.goods_list[this.goods_index] = obj;
			// 重新扫码
			// this.reScan(); // 选择后不自动扫码
		},

		async updateStatusByBarCode(barCode) {
			try {
				const res = await this.$u.api.getDetailByGoodsCode({
					id: this.bill_id,
					barCode: barCode
				});

				if (!Array.isArray(res.data) || !res.data.length) {
					this.$u.toast('条码无效或不属于本单');
					return;
				}

				let itemUpdated = false;
				for (const scannedItem of res.data) {
					const index = this.goods_list.findIndex(item => item.skuId === scannedItem.skuId && !item.scanned);
					if (index > -1) {
						this.goods_list[index].scanned = true;
						this.$u.toast(`${this.goods_list[index].materielName} 已出库`);
						itemUpdated = true;
						break; // 一次只更新一个匹配的未扫码商品
					}
				}

				if (!itemUpdated) {
					this.$u.toast('该商品已扫过');
				}
			} catch (err) {
				this.$u.toast('扫码处理失败，请重试');
				console.error(err);
			}
		},

		getDetailByGoodsCode(barCode) {
			// 此方法被新的 updateStatusByBarCode 替代
		},
		// 选择商品
		selGoods(row) {
			const index = this.goods_list.findIndex(item => item.skuId === row.skuId);
			this.openwarehouse(index, row);
			this.goods_show = false;
		},
		// 重新扫码
		reScan() {
			// 在连续扫码模式下，此方法不再需要主动调用
		},
		// 出库单详情
		async getInventoryOutInfo() {
			await this.$u.api.getInventoryOutInfo(this.bill_id).then(res => {
				this.out_detail = res.data;
				this.goods_list = res.data.details.map(item => {
					return {
						...item,
						num: item.total, // 默认出库数量为订单数量
						maxOutNum: item.total, //最大出库量
						notOutNum: 0,
						scanned: false // 增加扫码状态
					};
				});
			});
		},
		// 下一步
		nextPage() {
			// d当前出库数量为0，不允许点击下一步
			if (this.outMaterielNum < 1) {
				return;
			}
			const isNum = this.goods_list.some(item => {
				return item.warehouseId && !item.num;
			});
			if (isNum) {
				this.$u.toast('选择仓库后请输入本次出库数量');
				return;
			}
			// 存储数据跳到下一个页面
			this.out_detail.details = this.goods_list;
			uni.setStorageSync('outDetail', this.out_detail);
			this.goPage('/pagesT/stock/OutgoingGoodsInventory');
		}
	}
};
</script>

<style lang="scss" scoped>
.camera-container {
	position: relative;
	width: 100%;
	height: 400rpx;
	background-color: #000;
}
.camera-preview {
	width: 100%;
	height: 100%;
}
.camera-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #333;
}
.scan-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none; /* 让下层摄像头能接收事件 */
}
.scan-tip {
	margin-top: 280rpx;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	padding: 8rpx 24rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}
.sweep_code_top {
	width: 100%;
	height: 250rpx;
	background: linear-gradient(180deg, #fb5904, #fb7a37, #ff8f59);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;

	.sweep_code_top_cont {
		width: 100%;
		padding: 0 40rpx;
		.input-group {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 8rpx 8rpx 8rpx 30rpx;
			input {
				flex: 1;
				color: #333;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
			}
			.btn-group {
				display: flex;
				align-items: center;
				.btn {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #fb5904;
					color: #fff;
					font-size: 28rpx;
					border-radius: 30rpx;
					margin-left: 10rpx;
					.custom-icon-scan {
						font-size: 40rpx;
						color: #ffffff;
					}
				}
			}
		}
	}
}

.inventory {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #f8f8f8;
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #666;
	border-bottom: 1px solid #f0f0f0;
}

.sweep_code-ul {
	padding-bottom: 130rpx;
	background-color: #f8f8f8;
	.sweep_code-li {
		margin-top: 20rpx;
		width: 100%;
		background-color: #ffffff;
		padding: 24rpx;
		box-sizing: border-box;

		.logs-goods {
			display: flex;
		}

		.goods-img {
			position: relative;
			width: 150rpx;
			height: 150rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			flex-shrink: 0;
			.all-tag {
				line-height: 36rpx;
				height: 36rpx;
				background-color: rgba(45, 197, 132, 0.8);
				text-align: center;
				width: 100%;
				color: #ffffff;
				font-size: 22rpx;
				position: absolute;
				left: 0;
				bottom: 0;
			}
			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.goods-info {
			flex: 1;
			.goods-name-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 40rpx;
				.goods-name {
					line-height: 40rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
				}
				.status-tag {
					padding: 4rpx 12rpx;
					font-size: 22rpx;
					border-radius: 4rpx;
					&.status-pending {
						background-color: #fef0f0;
						color: #fa3534;
						border: 1px solid #fab6b6;
					}
					&.status-scanned {
						background-color: #f0f9eb;
						color: #67c23a;
						border: 1px solid #c2e7b0;
					}
				}
			}
			.goods-name {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333;
			}
			.goods-sku {
				padding-top: 10rpx;
				color: #999;
				font-size: 24rpx;
			}
			.goods-sku-selectable {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 0;
				font-size: 26rpx;
				.label {
					color: #666;
				}
				.value {
					display: flex;
					align-items: center;
					color: #333;
					text {
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		border-top: 1px solid #f0f0f0;
		padding-top: 20rpx;

		.stock-info {
			color: #999;
			font-size: 24rpx;
			line-height: 1.5;
			.num {
				font-size: 26rpx;
				color: #fb5904;
				font-weight: 500;
			}
			.saleable {
				padding-top: 4rpx;
			}
		}

		.stepper {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #333;
			text {
				margin-right: 16rpx;
			}
		}
	}
}

.submit-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 98rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);

	.submit-btn-left {
		padding-left: 24rpx;
		color: #999;
		flex: 1;
		.other-info {
			font-size: 24rpx;
			line-height: 1.5;
		}
	}

	.btn-right {
		text-align: center;
		width: 300rpx;
		color: #ffffff;
		background-color: #fb5904;
		line-height: 98rpx;
		font-size: 30rpx;
		&.btn-min-no {
			background-color: #c0c4cc;
		}
	}
}
.pop-view {
	position: relative;
	height: 100%;
	background-color: #fff;

	.pop-title {
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 500;
		border-bottom: 1px solid #f0f0f0;
	}
	.title {
		text-align: center;
		line-height: 36rpx;
		padding-top: 20rpx;
		font-size: 30rpx;
	}
	.goods-name {
		font-size: 24rpx;
		color: #999;
		line-height: 36rpx;
		text-align: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	.warehouse-ul {
		.warehouse-li {
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f0f0f0;
			line-height: 1.6;
			position: relative;
			.name {
				font-size: 28rpx;
				color: #333;
				.label {
					color: #999;
					margin-right: 20rpx;
				}
			}
			.num {
				color: #999;
				font-size: 24rpx;
			}
			.sel-icon {
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
			}
		}
	}
	.pop-submit-btn {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		text-align: center;
		padding: 20rpx 0;
		background-color: #fff;
	}
	.goods-ul {
		.goods-li {
			border-bottom: 1px solid #f0f0f0;
			padding: 20rpx 30rpx;
			position: relative;
			display: flex;
			align-items: center;

			.goods-img {
				margin-right: 20rpx;
				flex-shrink: 0;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					background-color: #f5f5f5;
				}
			}
			.goods-info {
				flex: 1;
				.name-view {
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color: #333;
				}
				.goods-sku {
					color: #999;
					font-size: 24rpx;
				}
			}
			.sel-icon {
				padding-left: 20rpx;
			}
		}
	}
}
</style>
